<template>
  <div id="category">
    <nav-bar id="navbar"><div slot="center">商品分类</div></nav-bar>
    <div class="betterTabMenu">
      <div class="tabControlTitles">
        <tab-control ref="controlClick1" @controlClick="controlClick" :titles="['综合','新品','销量']" v-show="isActive"></tab-control>
      </div>
      <better-scroll class="wrappers" ref="betScroll">
        <TabMenu @btnClickIndex="btnClickIndex" @btnClick="btnClick" :category="category"></TabMenu>
      </better-scroll>
      <better-scroll class="wrapperTab" ref="betScrollLoad" :probeType="3" :listenScroll="true" @scroll="scroll">
        <tab-content-category @itemImgLoad="itemImgLoad" :showSubcategories="showSubcategories"></tab-content-category>
        <tab-control ref="controlClick2" @controlClick="controlClick" :titles="['综合','新品','销量']"></tab-control>
        <goods-list :goodsCommodity="showCategoryDetail" @itemImgLoad="itemImgLoad"></goods-list>
      </better-scroll>
    </div>
  </div>
</template>

<script>
  import NavBar from "components/common/navbar/NavBar";
  import BetterScroll from "components/common/betterScroll/BetterScroll";
  import TabMenu from "views/category/children/TabMenu";
  import TabContentCategory from "views/category/children/TabContentCategory";
  import TabControl from "components/content/tabcontrol/TabControl";
  import GoodsList from "components/content/goods/GoodsList";

  import {backTopMixin} from "common/mixin";
  import {Debounce} from "common/util";
  import {categoryClassify,getCategoryDetail,getCategory,getCategoryList} from "network/category";

  export default {
    name: "Category",
    components: {
      NavBar,
      TabMenu,
      GoodsList,
      TabControl,
      BetterScroll,
      TabContentCategory
    },
    data(){
      return {
        category: [], //左侧分类数据
        subcategories: [], //右侧的数据
        getList: {
          'pop': {page: 1,list: []},
          'new': {page: 1,list: []},
          'sell': {page: 1,list: []}
        },
        currentIndex: -1,
        isActive: false,
        offsetTop: 0,
        type: 'pop'
      };
    },
    computed: {
      showSubcategories(){
        return this.currentIndex !== -1 && Object.keys(this.subcategories[this.currentIndex].subcategoriesData).length !== 0 ? this.subcategories[this.currentIndex].subcategoriesData : {};
      },
      showCategoryDetail(){
        return Object.keys(this.getList[this.type].list).length !== 0 ? this.getList[this.type].list : []
      }
    },
    mixins: [backTopMixin],
    methods: {
      //tabControl点击切换类型
      controlClick(index){
        switch (index) {
          case 0:
            this.type = 'pop';
            break;
          case 1:
            this.type = 'new';
            break;
          case 2:
            this.type = 'sell';
            break;
        }

        this.$refs.controlClick1.currentIndex = index;
        this.$refs.controlClick2.currentIndex = index;
      },
      /**
       * betterScroll实时派发滚动事件
       */
      scroll(pos){
        this.isActive =  -(pos.y) >= this.offsetTop;
      },
      /**
       * 右侧边栏重新计算高度
       */
      itemImgLoad(){
        let debounce = Debounce(this.$refs.betScrollLoad.refresh,50);
        debounce();
        this.$nextTick(() => {
          this.offsetTop = this.$refs.controlClick2.$el.offsetTop;
        })
      },
      /**
       * 左侧边栏重新计算高度
       */
      btnClick(){
        let debounce = Debounce(this.$refs.betScroll.refresh,50);
        debounce();
      },
      btnClickIndex(index){
        this.getSubcategories(index);
        this.$refs.betScrollLoad.scrollTo(0,0,0);
        this.$refs.controlClick1.currentIndex,this.$refs.controlClick2.currentIndex = 0;
      },
      /**
       * 请求分类数据
       * @param index 请求index
       */
      getSubcategories(index){
        let maitKey = this.category[index].maitKey;
        categoryClassify(maitKey)
          .then(res => {
            this.subcategories[index].subcategoriesData = res.data.data;
            this.currentIndex = index;
            this.getCategoryDetail('pop');
            this.getCategoryDetail('sell');
            this.getCategoryDetail('new');
          })
          .catch(err => {
            console.log(err + '请求错误,错误处理!!!');
          });
      },
      /**
       * 选中的类型数据
       * @param type
       */
      getCategoryDetail(type){
        let miniWallkey = this.category[this.currentIndex].miniWallkey;
        getCategoryDetail(miniWallkey,type)
          .then(res => {
            this.getList[type].list = res.data;
          })
          .catch(err => {
            console.log(err + '请求错误处理!')
          });
      },
      getInitData(){
        getCategory()
          .then((res) => {
            this.category = res.data.data.category.list; //获取左侧分类数据
            for (let key in this.category) {
              this.subcategories[key] = {
                subcategoriesData: {},
              }
            };
            //请求第一个分类数据
            this.getSubcategories(0);
          })
          .catch((err) => {
            console.log(err + "请求失败！错误处理");
          });
      }
    },
    created() {
      this.getInitData();
    }
  }
</script>

<style scoped>
  .tabControlTitles{
    position: absolute;
    left: 100px;
    right: 0;
    top: 49px;
    z-index: 999;
  }
  #navbar {
    background-color: var(--color-tint);
    color: white;
    font-weight: bold;
    position: relative;
    z-index: 999;
  }
  #category{
    position: relative;
    height: 100vh;
    background-color: white;
  }
  .wrappers{
    position: absolute;
    top: 49px;
    bottom: 49px;
    left: 0;
    overflow: hidden;
  }
  .betterTabMenu{
    display: flex;
  }
  .wrapperTab{
    position: absolute;
    top: 49px;
    bottom: 49px;
    left: 100px;
    right: 0;
    overflow: hidden;
  }
</style>